import React from 'react'
import './mine.css'
import { Grid, Button, Modal, Slider } from 'antd-mobile'
import { getUserInfo, changeAvatar } from '../../api/allapi'
import { getUser } from '../../serve/usermsg'
import AvatarEditor from 'react-avatar-editor'

// import AvatarEditor from 'react-avatar-editor'

let gridtext = [
  '看房记录',
  '我的订单',
  '我的收藏',
  '个人资料',
  '身份认证',
  '联系我们'
]

const prompt = Modal.prompt

// Modal1-->选择图片
class ModalSelectImage extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      modal1: true
    }
    this.myRef = React.createRef()
  }
  componentWillUnmount() {
    this.setState = state => {
      return
    }
  }
  onClose = () => {
    const { closeModal1 } = this.props
    // 获取input中的file图片
    // console.log(this.myRef.current);
    const file = this.myRef.current.files[0]
    console.log(file);
    closeModal1(file)
  }
  render() {
    return (
      <Modal
        visible={this.state.modal1}
        transparent
        maskClosable={false}
        onClose={this.onClose}
        title="选择图片"
        footer={[
          {
            text: '确定',
            onPress: () => {
              this.onClose()
            }
          }
        ]}
        wrapProps={{ onTouchStart: this.onWrapTouchStart }}
      >
        <input ref={this.myRef} style={{width: '200px'}} type="file" name="file" />
      </Modal>
    )
  }
}
// Modal2-->裁切图片
class ModalCoreImage extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      modal2: true,
      file: {},
      scale: 1
    }
  }
  componentDidMount() {
    const { file } = this.props
    this.setState({
      file
    })
  }
  componentWillUnmount() {
    this.setState = state => {
      return
    }
  }
  // 更改头像
  changeMyAvatar = async (resImage) => {
    await changeAvatar(resImage)
  }
  onClose = () => {
    const { closeModal2 } = this.props
    if (this.editor) {
      const canvasScaled = this.editor.getImageScaledToCanvas()
      // 接下来是canvas操作DOM的方法 canvaAPI 获取图片数据的方法
      const resImage = canvasScaled.toDataURL()
      // console.log(resImage);
      this.changeMyAvatar(resImage)
      closeModal2(resImage)
    }
  }
  changeScale = (val) => {
    // console.log(val);
    // 使缩放为 1~2 倍之间
    this.setState({
      scale: val / 10
    })
  }
  setEditorRef = (editor) => this.editor = editor
  render() {
    return (
      <Modal
        visible={this.state.modal2}
        transparent
        maskClosable={false}
        onClose={this.onClose}
        title="裁切图片"
        footer={[
          {
            text: '确定',
            onPress: () => {
              this.onClose()
            }
          }
        ]}
        wrapProps={{ onTouchStart: this.onWrapTouchStart }}
      >
        <AvatarEditor
          ref={this.setEditorRef}
          image={this.state.file}
          width={150}
          height={150}
          border={50}
          borderRadius={75}
          color={[255, 255, 255, 0.6]} // RGBA
          scale={this.state.scale}
          rotate={0}
        />
        <Slider
          style={{ marginLeft: 30, marginRight: 30, touchAction: 'none' }}
          defaultValue={10}
          min={10}
          max={20}
          onChange={this.changeScale}
        />
      </Modal>
    )
  }
}

class Mine extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      uname: '',
      data: Array.from(new Array(6)).map((_val, i) => ({
        icon:
          'https://gw.alipayobjects.com/zos/rmsportal/nywPmnTAvTmLusPxHPSu.png',
        text: `name${i}`
      })),
      isShow1: false,
      isShow2: false,
      file: {},
      avatarPath: ''
    }
  }
  componentDidMount() {
    // Grid数据修改
    let data = Array.from(new Array(6)).map((item, i) => {
      return {
        id: i + 1,
        icon: `http://127.0.0.1:8086/public/0${i + 1}.png`,
        text: gridtext[i]
      }
    })
    this.setState({
      data
    })
    const { uid } = getUser()
    this.getUserMsg(uid)
  }
  componentWillUnmount() {
    this.setState = state => {
      return
    }
  }
  // 获取用户个人信息
  getUserMsg = async (uid) => {
    const { data, meta: { status } } = await getUserInfo(uid)
    if (status === 200) {
      this.setState({
        uname: data.username,
        avatarPath: data.avatar
      })
    }
  }

  showImageModal = () => {
    // 打开图片选择的modal
    this.setState({
      isShow1: true
    })
  }
  closeModal1 = (file) => {
    this.setState({
      isShow1: false,
      isShow2: file,
      file
    })
  }
  closeModal2 = (resImage) => {
    this.setState({
      isShow2: false,
      avatarPath: resImage
    })
  }

  render() {
    return (
      <div className="my-container">
        {this.state.isShow1 && <ModalSelectImage closeModal1={this.closeModal1} />}
        {this.state.isShow2 && <ModalCoreImage closeModal2={this.closeModal2} file={this.state.file} />}
        <div className="my-title">
          <img src={'http://127.0.0.1:8086/' + 'public/my-bg.png'} alt="me" />
          <div className="info">
            <div className="myicon">
              <img
                onClick={this.showImageModal}
                src={this.state.avatarPath}
                alt="icon"
              />
            </div>
            <div className="name">{this.state.uname}</div>
            <Button>已认证</Button>
            <div className="edit">编辑个人资料</div>
          </div>
        </div>
        <Grid
          square
          columnNum={3}
          data={this.state.data}
          isCarousel
          onClick={el => {
            this.selectMenuITtem(el)
          }}
        />

        <div className="my-ad">
          <img src={'http://127.0.0.1:8086/' + 'public/ad.png'} alt="" />
        </div>
      </div>
    )
  }
}

export default Mine
